<template>
  <div id="app">
    <Header v-if="$route.meta.showHeader"></Header>
    <transition mode="out-in">
      <!-- 占位符 -->
      <router-view></router-view>
    </transition>
    <Footer v-if="$route.meta.showFooter"></Footer>
  </div>
</template>

<script>
import Footer from "./components/Footer.vue";
import Header from "./components/Header.vue";
import { getAddressAPI } from "@/api/address";
export default {
  name: "App",
  components: {
    Footer,
    Header,
  },
  methods: {
    //获取收货地址的列表，将其存入到vuex里面
    async getAddressList() {
      const result = await getAddressAPI();
      console.log(result);
      //直接存入vuex
      this.$store.commit("saveReceiver", result.addresses);
    },
  },
  created() {
    //数据持久化，防止刷新后vuex的token丢失
    const token = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.$store.commit("saveToken", token);
    // //数据持久化，存入vuex的收货人地址不丢失
    // const address = localStorage.getItem("address")
    //   ? JSON.parse(localStorage.getItem("address"))
    //   : [];
    // this.$store.commit("localStorageReceiver", address);
    // 获取到全部收货地址后
    // 将其放入自己的vuex里面
    this.getAddressList();
  },
};
</script>

<style scoped>
/* 设置模块滑动效果 */
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
/* 过渡的过程 */
.v-enter-active,
.v-leave-to {
  transition: all 0.5s ease;
}
</style>
